/**
 * @author wn
 * @date 2022/05/11 11:43:41
 * @description:
 *  解构出的函数
 *  createRouter           -  用于创建路由的函数
 *  createWebHashHistory   -  哈希路由模式
 *  createWebHistory       -  History 模式
 *
 *  二级路由的首页 默认是 '' 或者 路径 要与 父亲的  路径保持一直
 */

import { createRouter, createWebHashHistory, RouterView } from 'vue-router'
import store from '@/store'
// import { h } from 'vue'
// 懒加载
const Layout = () => import('@/views/Layout')
const Home = () => import('@/views/home')

const Category = () => import('@/views/category')
const SubCategory = () => import('@/views/category/SubCategory')

const Goods = () => import('@/views/goods')

const Login = () => import('@/views/login/Layout')
const LoginSection = () => import('@/views/login/login')
const CallBack = () => import('@/views/login/callback')

const Register = () => import('@/views/register')

const Cart = () => import('@/views/cart')

const CheckOut = () => import('@/views/member/pay/CheckOut')
const PayPage = () => import('@/views/member/pay')
const PayCallBack = () => import('@/views/member/pay/CallBack')

const MemberLayout = () => import('@/views/member/Layout')
const MemberHome = () => import('@/views/member/home')
const MemberOrder = () => import('@/views/member/order')
const MemberOrderDetail = () => import('@/views/member/order/OrderDetail')

const routes = [
	// App 一级路由布局容器
	{
		path: '/',
		component: Layout,
		// 二级路由
		children: [
			// 主页--HomePage
			{ path: '/', component: Home },
			// 分类页--CategoryPage
			{ path: '/category/:id', component: Category },
			{ path: '/category/sub/:id', component: SubCategory },
			// 商品详情页--Goods
			{ path: '/product/:id', component: Goods },
			// 购物车页面--index
			{ path: '/cart', component: Cart },
			// 提交订单页面--CheckOut
			{ path: '/member/checkout', component: CheckOut },
			// 支付宝支付页面--index
			{ path: '/member/pay', component: PayPage },
			// 支付宝支付结果--回调页面--callback
			{ path: '/pay/callback', component: PayCallBack },
			// 个人中心--入口页面--Layout
			{
				path: '/member',
				component: MemberLayout,
				// 三级路由  个人中心--右侧 内容
				children: [
					// 个人中心主页面--index
					{ path: '', component: MemberHome },
					// 个人中心订单页--index h(<RouterView />)
					// h(组件,{属性})=jsx<组件/>=createVNode(组件,{属相})
					{
						path: 'order',
						component: { render: () => <RouterView /> },
						// 四级路由 主要为了 vue3 激活 模糊匹配 css
						children: [
							// 个人中心订单页--index
							{ path: '', component: MemberOrder },
							// 个人中心订详情单页--OrderDetail
							{ path: ':id', component: MemberOrderDetail },
						],
					},
				],
			},
		],
	},
	// 登陆 一级路由
	{
		path: '/login',
		component: Login,
		// 二级路由
		children: [
			// 登陆 注册 页   首页默认 ''
			{ path: '', component: LoginSection },
			// QQ 回调页
			{ path: 'callback', component: CallBack },
		],
	},
	// 注册 一级路由
	{ path: '/register', component: Register },
]

const router = createRouter({
	history: createWebHashHistory(), // Hash 模式
	routes,
	// 滚动行为
	scrollBehavior() {
		// 始终滚动到顶部
		return { top: 0 }
	},
	// 路由激活样式
	linkActiveClass: 'active',
})
// 前置导航守卫
// 约定好 只要是去个人中心的 必须登陆  /member 开头
router.beforeEach((to, from, next) => {
	const token = store.state.user.profile.token
	if (!token && to.path.startsWith('/member')) {
		next(`/login?redirectUrl=${encodeURIComponent(to.fullPath)}`)
	}
	// 普通情况，直接放行
	next()
})
export default router
